<template>
  <a-modal title="新增商铺" v-model="visible" width="800px" v-on="$listeners" @ok="submit" okText="发布">
    <div id="shop-add-model">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" ref="form">
        <a-form-item label="转让/出租" required>
          <a-radio-group v-model="form.dataType">
            <a-radio value="商铺转让" >商铺转让</a-radio>
            <a-radio value="商铺出租">商铺出租</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="行业" required>
          <a-select v-model="form.hangye" showSearch>
            <a-select-option v-for="d in industry" :key="d.value">{{ d.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="区域" required>
          <div style="display:flex;">
            <a-space>
              <a-select placeholder="地区" v-model="form.city" style="width:200px">
                <a-select-option v-for="d in citys" :key="d.value" :value="d.value + '-' + d.label">{{
                  d.label
                }}</a-select-option>
              </a-select>
              <a-select placeholder="区域" v-model="form.area" style="width:200px">
                <a-select-option v-for="d in areas" :key="d.value" :value="d.value + '-' + d.label">{{
                  d.label
                }}</a-select-option>
              </a-select>
              <a-select placeholder="区域" v-model="form.ranges" style="width:200px">
                              <a-select-option v-for="d in areas3" :key="d.value" :value="d.label">{{
                                d.label
                              }}</a-select-option>
                            </a-select>
            </a-space>
          </div>
        </a-form-item>
        <a-form-item label="详细地址">
          <a-input v-model="form.address"></a-input>
        </a-form-item>
        <a-form-item label="信息标题" required>
          <a-input v-model="form.title"></a-input>
        </a-form-item>
        <a-form-item label="来源">
          <a-input v-model="form.source"></a-input>
        </a-form-item>
        <a-form-item label="面积">
          <a-input-number placeholder="平方米" v-model="form.areaNum"></a-input-number>
          <span style="margin-left:5px;">/m²</span>
        </a-form-item>
        <a-form-item label="租金">
          <a-input-number placeholder="元/月" v-model="form.yuezujin"></a-input-number>
          <span style="margin-left:5px;">元/月</span>
        </a-form-item>
        <a-form-item label="转让费">
          <a-radio-group v-model="form.zrprice">
            <a-radio value="面议">面议</a-radio>
            <a-radio value="用户输入"></a-radio>
            <a-input-number
              @change="onFocus"
              v-model="form.zrprice_user"
              :min="0"
              style="margin-right:10px;"
            ></a-input-number>
            <span>万元</span>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="业主姓名" required>
          <a-input v-model="form.uname"></a-input>
        </a-form-item>
        <a-form-item label="联系电话" required>
          <a-input v-model="form.phone"></a-input>
        </a-form-item>
        <a-form-item label="店铺简介">
          <a-textarea v-model="form.jianjie"></a-textarea>
        </a-form-item>
        <!-- <a-form-item label="上传图片">
          <a-button @click="shwoCrop = true">选择图片</a-button>
          <div v-if="!!preview">
            <img :src="preview" />
          </div>
        </a-form-item> -->
      </a-form>
    </div>
    <cropper :visible.sync="shwoCrop" @crop="onCrop" :layout="[700, 500]" :size="[160, 160]" />
  </a-modal>
</template>
<script>
import { postAction } from '@api/manage'
import * as api from '@api/api'
// import cropper from './cropper'
// import JEditor from '@/components/jeecg/JEditor'

/**
 * 商铺公海:新增弹窗
 * @description: 新增模态框
 */
export default {
  name: 'ScSystemShopList-AddModal',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {},
  data() {
    return {
      rules: {
        dataType: [{ required: true, message: '请选择转让/出租' }],
        industry: [{ required: true, message: '请选择行业' }]
      },
      shwoCrop: false,
      form: {
        uname: '',
        yuezujin: '',
        address: '',
        title: '',
        jianjie: '',
        areaNum: '',
        city: '',
        area: '',
        ranges:'',
        dataType: '商铺转让',
        source: '', // 来源
        phone: '', // 联系电话
        hangye: '', // 行业
        zrprice: ''
      },
      industry: [],
      citys: [],
      areas: [],
      areas3: [],
      country: [],
      preview: ''
    }
  },
  watch: {
    'form.city'(v) {
      this.form.area = null
      const id = v.split('-')[0]
      api.getCityAreas(id).then(res => {
        this.areas = res
      })
    },'form.area'(v) {
            this.form.area3 = null
            const id = v.split('-')[0]
            api.getCityAreas3(id).then(res => {
              this.areas3 = res
            })
          }
  },
  computed: {},
  mounted() {
    this.getIndustryList()
    api.getCitys().then(res => {
      this.citys = res
    })
  },
  methods: {
    onFocus(e) {
      if (this.form.zrprice !== '用户输入') {
        this.form.zrprice = '用户输入'
      }
    },
    async submit() {
      const params = { ...this.form }
      if (!/^1[3456789]\d{9}$/.test(params.phone)) {
        this.$message.error('请输入正确的手机号码')
        return
      }
      if (!params.title) return this.$message.error('请输入店铺名称')
      if (!params.uname) return this.$message.error('请输入业主姓名')

      if (params.zrprice == '用户输入') {
        params.zrprice = "转让费"+params.zrprice_user + '万元'
        delete params.zrprice_user
      }
      if (params.city) params.city = params.city.split('-')[1]
      if (params.area) params.area = params.area.split('-')[1]
      if (params.yuezujin) params.yuezujin = params.yuezujin + '元/月'
      params.houseId = `${Date.now()}`
      params.areaUnit = 'm²'
      postAction('shop/scSystemShop/add', params).then(res => {
        if (res.code === 200) {
          this.$message.success('新增成功')
          this.$emit('success')
          this.$emit('cancel')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    onCrop(e) {
      this.preview = e
    },
    getIndustryList() {
      api.getIndustryList().then(res => {
        this.industry = res
      })
    },
    onSelectArea(value) {
      console.log('⭕️ value: ', value)
    }
  }
}
</script>
<style>
#shop-add-model .ant-form-item {
  margin-bottom: 0 !important;
}
</style>
